<template>
	<view class="page">
		<view class="topbox">
			<view class="money">
				{{yajinnum}}
			</view>
		</view>
		<view class="checkbox">
			<view class="checktitle">
				选择类型
			</view>
			<view class="checkline">
				<view class="itemcheck" @click="selectcheck(1)">
					<view v-if="check==1" class="iconfont icon-xuanzhong act"></view>
					<view v-if="check!=1" class="iconfont icon-weixuanzhong"></view>
					充值
				</view>
				<view class="itemcheck" @click="selectcheck(2)">
					<view v-if="check==2" class="iconfont icon-xuanzhong act"></view>
					<view v-if="check!=2" class="iconfont icon-weixuanzhong"></view>
					提现
				</view>
			</view>
		</view>
		<view class="chongzhi" v-if="check==1">
			<view class="checkbox">
				<view class="checktitle">
					充值金额
				</view>
				<view class="putline">
					 ￥ <input type="number" placeholder="请输入充值金额" v-model="set" />
					
				</view>
			</view>
			<view class="labelbox">
				<view class="label1">
					扫码购买
				</view>
				<view class="title1">
					识别下方二维码购买
				</view>
			</view>
					
			<view class="imgbox">
			<image class="image" :src="'https://admin.caifubang.top/prod-api'+erweimaurl" mode=""  @click="showsancode"></image>
			</view>
			<view class="pricetitle">
				 应付 <view class="price">￥{{set}}</view>
			</view>
			<view class="upbox">
				<view class="putitle">
					上传支付记录
				</view>
				<view class="imglist">
					<image class="image"  v-for="(item ,index) in imglist" :key="index" :src="'https://admin.caifubang.top/prod-api'+item" @click="yulan(index)" ></image>
					
					<view class="upbtn" @click="uppayimg">
						+
					</view>
				</view>
				<view class="imglabel">
					点击上传支付记录图片，保证图片真实，清晰
				</view>
			</view>
	
		
			<view class="pagebtn" @click="setmoney">
				提交审核
			</view>
			
		</view>
		<view class="tixian" v-if="check==2">
			<view class="checkbox">
				<view class="checktitle">
					提现金额
				</view>
				<view class="putline">
					 ￥ <input type="number" placeholder="请输入提现金额" v-model="out" />
					 <view class="btn" @click="allprice">
					 	全部金额
					 </view>
				</view>
			</view>
			<view class="pagebtn" @click="tixian" >
				提交审核
			</view>
		</view>
	</view>
</template>

<script>
	import {getMemberById,getSysConfigByType,applyRechargeDeposit,applyWithdraw} from '../../utils/api.js'
	export default {
		data() {
			return {
				yajinnum:'',
				check:'1',
				set:'',
				out:'',
				erweimaurl:'',
				imglist:[]
			}
		},
		onShow() {
			getMemberById().then(res=>{
				this.yajinnum=res.data.data.deposit
			})
			getSysConfigByType('sys_platform_ercode').then(res=>{
				
				this.erweimaurl=res.data.data.value
			})
		},
		methods: {
			showsancode(){
				let list=[]
				let url='https://admin.caifubang.top/prod-api'+ this.erweimaurl
				list.push(url)
				console.log(list)
				uni.previewImage({
							urls:list,
							longPressActions: {
								itemList: ['发送给朋友', '保存图片', '收藏'],
								success: function(data) {
									console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
								},
								fail: function(err) {
									console.log(err.errMsg);
								}
							}
						});
			},
			tixian(){
				if(this.out==''){
					uni.showToast({
						title: '请输入充值金额',
											icon:'none',
						duration: 2000
					});
					return
				}
				if(Number(this.yajinnum)<Number(this.out)){
									 uni.showToast({
									 	title: '超过押金最大额度',
									 	icon:'none',
									 	duration: 2000
									 });
									 return 
				}
				let p={
					type:2,
					amount:this.out
				}
				applyWithdraw(p).then(res=>{
					console.log(res)
					if(res.data.code==200){
											  uni.showToast({
											  	title: '已提交待审核',
											  	icon:'none',
											  	duration: 2000
											  });
											 setTimeout(()=>{
												 uni.navigateBack()
											 },1000)
					}
				})
			},
			
			
			
                //全部金额
			allprice(){
				this.out=this.yajinnum
			},
			
			
			//充值押金
	          setmoney(){
				  if(this.set==''){
					  uni.showToast({
					  	title: '请输入充值金额',
						icon:'none',
					  	duration: 2000
					  });
					  return
				  }
				  if(this.imglist.length==0){
				  		 uni.showToast({
				  			title: '请上传支付截图',
				  			icon:'none',
				  			duration: 2000
				  			});
				  			 return
				  
				  }
				  if(Number(this.yajinnum)<Number(this.set)){
					 uni.showToast({
					 	title: '超过押金最大额度',
					 	icon:'none',
					 	duration: 2000
					 });
					 return 
				  }
				  let p={
					  rechargeAmount:this.set,
					  uploadImageUrl:this.imglist.join(",")
					  
				  }
				  applyRechargeDeposit(p).then(res=>{
					  console.log(res)
					  if(res.data.code==200){
						  uni.showToast({
						  	title: '已提交待审核',
						  	icon:'none',
						  	duration: 2000
						  });
						 setTimeout(()=>{
							 uni.navigateBack()
						 },1000)
					  }
					  
				  })
			  },
			  
			  //选择操作
			selectcheck(e){
				this.check=e
				this.set='',
				this.out='',
				this.imglis=[]
				
			},
			//预览图片
			yulan(e){
				const baseUrl = "https://admin.caifubang.top/prod-api"
				let imglist = this.imglist.map(path => baseUrl + path)
				uni.previewImage({
							urls: imglist,
							longPressActions: {
								itemList: ['发送给朋友', '保存图片', '收藏'],
								success: function(data) {
									console.log(data)
									console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
								},
								fail: function(err) {
									console.log(err.errMsg);
								}
							}
						})
			},
			//上传支付截图
			uppayimg(){
				// this.imgurl= "/profile/upload/2025/09/12/860678076395534_1_20250912112842A004.png"
				let that=this
				uni.chooseImage({
					count: 1, 
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function (res) {
					   const file = res.tempFiles[0]  // File 对象
					      console.log(file)
										   uni.uploadFile({
										        url: 'https://admin.caifubang.top/prod-api/system/WeChatPublicApi/uploadImage',
										        file: file,                     // H5 用
										        name: 'file',
												 header: {
												    Authorization: 'Bearer ' + uni.getStorageSync('token'), 
												  },
										        success: (uploadRes) => {
												 that.imglist.push(JSON.parse(uploadRes.data).data.fileName)
												 console.log('上传成功', that.imgurl)
										        }
										      })}
				});
			},
		}
	}
</script>

<style lang="less" scoped>
   .page{
	   width: 750rpx;
	   box-sizing: border-box;
	   .topbox{
		  background: #FF5C00;
		  width: 100%;
		  height: 300rpx;
		  color: white;
		  text-align: center;
		  box-sizing: border-box;
		  line-height: 270rpx;
		  font-size: 60rpx;
		  font-weight: bold;
	   }
	   .checkbox{
		   width: 100%;
		   height: 150rpx;
		   box-sizing: border-box;
		   padding: 20rpx;
		   margin-top: 30rpx;
		   .checktitle{
			  font-weight: bold; 
		   }
		   .checkline{
			   width: 80%;
			   margin:50rpx auto;
			   display: flex;
			   align-items: center;
			   justify-content: space-between;
			   .itemcheck{
				   display:flex;
				   align-items: center;
				   .iconfont{
					   margin-right: 20rpx;
					   color: gray;
				   }
				   .act{
					   color: #FF5C00;
				   }
			   }
		   }
		   .tixian{
			   width: 100%;
		   }
		   .putline{
			   width: 100%;
			   height: 80rpx;
			   line-height: 80rpx;
			   display: flex;
			   align-items: center;
			   justify-content: space-between;
			   font-size: 50rpx;
			   font-weight: bold;
			   margin-top: 30rpx;
			   border-bottom: 1rpx solid whitesmoke;
			   input{
				   flex: 1;
				   height: 80rpx;
				   padding: 0 20rpx;
			   }
			   .btn{
				   width: 180rpx;
				   height: 80rpx;
				   border-radius: 10rpx;
				   color: white;
                    text-align: center;
					line-height: 80rpx;
					background-color: #FF5C00;
					font-size: 32rpx;
					
			   }
		   }
	   }
	   .labelbox{
	   	width: 100%;
	   	box-sizing: border-box;
	   	padding: 20rpx;
	   	margin-top: 50rpx;
	   	text-align: left;
	   	line-height: 2;
	   	.label1{
	   		font-weight: bold;
	   		text-align: left;
	   	}
	   	.title1{
	   		font-size: 30rpx;
	   		text-align: left;
	   		color: #ADADAD ;
	   	}
	   }
	   .pickerbox{
	   	width: 100%;
	   	.picker{
	   		width: 90%;
	   		height: 60rpx;
	   		line-height: 60rpx;
	   		margin: auto;
	   		background-color: #F4F4F4 ;
	   		padding: 0 20rpx;
	   	}
	   }
	   .imgbox{
	   	margin: 40rpx auto;
	   	width: 300rpx;
	   	height: 300rpx;
	   	border: 10rpx solid orange;
	   	image{
	   		width: 100%;
	   		height: 100%;
	   	}
	   }
	   .pricetitle{
	   	display: flex;
	   	align-items: center;
	   	text-align: center;
	   	margin: auto;
	   	width: 100%;
	   	justify-content: center;
	   	.price{
	   		font-weight: bold;
	   		color: #FF2E00;
	   	}
	   }
	   .upbox{
	   	width: 90%;
	   	margin: auto;
	   	background-color: #F4F4F4;
	   	box-sizing: border-box;
	   	padding: 20rpx;
	   	.uptitle{
	   		font-weight: bold;
	   	}
	   	.imglist{
	   		width: 100%;
	   		display: flex;
	   		align-items: center;
	   		
	   		image{
	   			width: 150rpx;
	   			height: 150rpx;
	   			border-radius: 10rpx;
	   			margin: 10rpx;
	   		}
	   		.upbtn{
	   			width: 150rpx;
	   			height: 150rpx;
	   			border-radius: 10rpx;
	   			margin: 10rpx;
	   			line-height: 150rpx;
	   			text-align: center;
	   			font-size: 88rpx;
	   			background-color: white;
	               color: gray;
	   		}
	   	}
	   	.imglabel{
	   		color: gray;
	   		font-size: 28rpx;
	   	}
	   }
	   
	   .titlebox{
	   	width: 90%;
	   	margin: auto;
	   	background-color: #F4F4F4;
	   	box-sizing: border-box;
	   	padding: 20rpx;
	   	.titletl{
	   		font-weight: bold;
	   	}
	   	.content{
	   		color: gray;
	   		font-size: 28rpx;
	   	}
	   }

	   .pagebtn{
		   width: 80%;
		  height: 80rpx;
		  border-radius: 40rpx;
		  color: white;
		   text-align: center;
		  					line-height: 80rpx;
		  					background-color: #FF5C00;
		  					font-size: 32rpx;
		   margin:200rpx auto;
	   }
   }
</style>
